<div ng-controller="CertificatesController as ctrl">
  <p translate>Select one or more SSL certificates for the listener.</p>

  <transfer-table tr-model="ctrl.tableData"
                  limits="::ctrl.tableLimits"
                  help-text="::ctrl.tableHelp">

    <!-- Allocated-->
    <allocated validate-number-min="0" ng-model="ctrl.tableData.allocated.length">
      <table st-table="ctrl.tableData.displayedAllocated"
             st-safe-src="ctrl.tableData.allocated" hz-table
             class="table table-striped table-rsp table-detail">
        <thead>
          <tr>
            <th class="rsp-p1" translate>Certificate Name</th>
            <th class="rsp-p1" translate>Expiration Date</th>
            <th class="actions_column"></th>
          </tr>
        </thead>
        <tbody>
          <tr ng-if="ctrl.tableData.allocated.length === 0">
            <td colspan="3">
              <div class="no-rows-help">
                {$ ::trCtrl.helpText.noneAllocText $}
              </div>
            </td>
          </tr>
          <tr ng-repeat="row in ctrl.tableData.displayedAllocated track by row.id">
            <td class="rsp-p1">{$ ::row.name $}</td>
            <td class="rsp-p1">{$ row.expiration | date | noValue $}</td>
            <td class="actions_column">
              <action-list>
                <action action-classes="'btn btn-sm btn-default'"
                        callback="trCtrl.deallocate" item="row">
                  <span class="fa fa-minus"></span>
                </action>
              </action-list>
            </td>
          </tr>
        </tbody>
      </table>
    </allocated>

    <!-- Available -->
    <available>
      <table st-table="ctrl.tableData.displayedAvailable"
             st-safe-src="ctrl.tableData.available"
             hz-table class="table table-striped table-rsp table-detail">
        <thead>
          <tr>
            <th class="search-header" colspan="3">
              <hz-search-bar icon-classes="fa-search"></hz-search-bar>
            </th>
          </tr>
          <tr>
            <th st-sort="name" st-sort-default class="rsp-p1" translate>Certificate Name</th>
            <th class="rsp-p1" translate>Expiration Date</th>
            <th class="actions_column"></th>
          </tr>
        </thead>
        <tbody>
          <tr ng-if="trCtrl.numAvailable() === 0">
            <td colspan="3">
              <div class="no-rows-help">
                {$ ::trCtrl.helpText.noneAvailText $}
              </div>
            </td>
          </tr>
          <tr ng-repeat="row in ctrl.tableData.displayedAvailable track by row.id"
              ng-if="!trCtrl.allocatedIds[row.id]">
            <td class="rsp-p1">{$ ::row.name $}</td>
            <td class="rsp-p1">{$ row.expiration | date | noValue $}</td>
            <td class="actions_column">
              <action-list>
                <action action-classes="'btn btn-sm btn-default'"
                        callback="trCtrl.allocate" item="row">
                  <span class="fa fa-plus"></span>
                </action>
              </action-list>
            </td>
          </tr>
        </tbody>
      </table>
    </available>

  </transfer-table>

</div>
